<template>
  <view class="container">
    <view class="media-list">
      <view class="media-item" v-for="(item, index) in mediaList" :key="index" @click="goToDetail(item.id)">
        <image class="media-image" :src="item.featured_media_url || '/static/default-img.png'" mode="aspectFill"></image>
        <view class="media-info">
          <text class="title">{{item.title.rendered}}</text>
          <rich-text class="desc" :nodes="item.excerpt.rendered"></rich-text>
          <view class="media-meta">
            <text class="date">{{formatDate(item.date)}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="loading" v-if="loading">加载中...</view>
    <view class="no-more" v-if="noMore">没有更多了</view>
  </view>
</template>

<script>
import api from '@/api/wordpress'

export default {
  data() {
    return {
      mediaList: [],
      page: 1,
      loading: false,
      noMore: false
    }
  },
  onLoad() {
    this.getMediaList()
  },
  methods: {
    async getMediaList() {
      if(this.loading || this.noMore) return
      
      this.loading = true
      try {
        const [err, res] = await api.getMediaList(this.page)
        if (!err && res.data) {
          this.mediaList = [...this.mediaList, ...res.data]
          if(res.data.length < 10) {
            this.noMore = true
          }
        }
      } catch(e) {
        uni.showToast({
          title: '获取影音列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`
      })
    }
  },
  onReachBottom() {
    if(!this.noMore) {
      this.page++
      this.getMediaList()
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.media-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.media-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.media-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 10rpx;
}
.desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.media-meta {
  margin-top: auto;
}
.date {
  font-size: 24rpx;
  color: #999;
}
.loading, .no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 28rpx;
}
</style> 